<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { queryElderDeviceDetail } from '@/api/customerManagement/device';

  const props = defineProps({
    elderId: { type: String, default: '' },
    modelId: { type: String, default: '' },
    modelName: { type: String, default: '' },
  });

  const loading = ref(false);
  const items = ref<any[]>([]);
  const activeKey = ref('0');

  const relationMap: Record<string, string> = {
    '11': '配偶',
    '12': '儿子',
    '13': '女儿',
    '14': '儿媳',
    '15': '女婿',
    '16': '兄弟',
    '17': '姐们',
    '18': '孙子/孙女',
    '99': '其他',
  };

  const fmt = (v: any) => (v || v === 0 ? String(v) : '—');

  const fmtDate = (v: any) => {
    if (!v) return '—';
    const d = new Date(String(v));
    if (Number.isNaN(d.getTime())) return String(v);
    const y = d.getFullYear();
    const m = `${d.getMonth() + 1}`.padStart(2, '0');
    const dd = `${d.getDate()}`.padStart(2, '0');
    return `${y}-${m}-${dd}`;
  };

  const relName = (code: any) => relationMap[String(code)] || fmt(code);
  const isOkText = (v: any) => {
    const s = String(v || '').toLowerCase();
    return (
      s.includes('正常') ||
      s.includes('在线') ||
      s.includes('有效') ||
      s.includes('在用') ||
      s.includes('使用')
    );
  };
  const gtZero = (v: any) => {
    const n = Number(v);
    return !Number.isNaN(n) && n > 0;
  };
  const isSignalOk = (v: any) => {
    const s = String(v || '').toLowerCase();
    if (s) {
      if (s.includes('强') || s.includes('优')) return true;
    }
    return gtZero(v);
  };

  const loadDetail = () => {
    if (!props.modelId || !props.elderId) {
      items.value = [];
      return Promise.resolve();
    }
    loading.value = true;
    return queryElderDeviceDetail(props.modelId, props.elderId)
      .then((res: any) => {
        const list = Array.isArray(res?.data)
          ? res.data
          : Array.isArray(res)
          ? res
          : res?.list || res || [];
        items.value = Array.isArray(list) ? list : [];
        activeKey.value = '0';
      })
      .finally(() => {
        loading.value = false;
      });
  };

  watch(
    () => [props.modelId, props.elderId],
    () => {
      loadDetail();
    },
    { immediate: true }
  );
</script>

<template>
  <div class="m-customer-devices">
    <div class="mcd-title">{{ props.modelName || '设备详情' }}</div>
    <a-spin :loading="loading">
      <div v-if="items.length">
        <a-tabs v-model:active-key="activeKey">
          <a-tab-pane
            v-for="(it, idx) in items"
            :key="String(idx)"
            :title="`设备${
              ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'][
                idx
              ] || idx + 1
            }`"
          >
            <div class="m-id-block">
              <div class="title"><span>设备基本信息</span></div>
              <div class="content content-basic">
                <div class="basic-grid">
                  <div class="basic-cell">
                    <span class="label">设备型号</span>
                    <span class="value">{{ fmt(it.deviceModel) }}</span>
                  </div>
                  <div class="basic-cell">
                    <span class="label">设备唯一编码</span>
                    <span class="value">{{ fmt(it.deviceCode) }}</span>
                  </div>
                  <div class="basic-cell">
                    <span class="label">运行状态</span>
                    <span class="value" :class="{ green: isOkText(it.runningStatusName) }">{{ fmt(it.runningStatusName) }}</span>
                  </div>
                  <div class="basic-cell">
                    <span class="label">设备电量</span>
                    <span class="value" :class="{ green: gtZero(it.powerValue) }">{{ fmt(it.powerValue) }}</span>
                  </div>
                  <div class="basic-cell">
                    <span class="label">设备信号强度</span>
                    <span class="value" :class="{ green: isSignalOk(it.signalLevel) }">{{ fmt(it.signalLevel) }}</span>
                  </div>
                  <div class="basic-cell">
                    <span class="label">付费类型</span>
                    <span class="value">{{ '—' }}</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="m-id-block">
              <div class="title"><span>SIM卡信息</span></div>
              <div class="content content-basic">
                <div class="basic-grid">
                  <div class="basic-cell">
                    <span class="label">运营商</span>
                    <span class="value">{{ fmt(it.simOperator) }}</span>
                  </div>
                  <div class="basic-cell">
                    <span class="label">套餐</span>
                    <span class="value">{{ fmt(it.simPlan) }}</span>
                  </div>
                  <div class="basic-cell">
                    <span class="label">卡状态</span>
                    <span class="value" :class="{ green: isOkText(it.simStatusName) }">{{ fmt(it.simStatusName) }}</span>
                  </div>
                  <div class="basic-cell">
                    <span class="label">MSISDN</span>
                    <span class="value">{{ fmt(it.simNumber) }}</span>
                  </div>
                  <div class="basic-cell">
                    <span class="label">ICCID</span>
                    <span class="value">{{ fmt(it.simIccid) }}</span>
                  </div>
                  <div class="basic-cell">
                    <span class="label">到期日期</span>
                    <span class="value">{{ fmtDate(it.simExpireDate) }}</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="m-id-block">
              <div class="title"><span>安装信息</span></div>
              <div class="content content-basic">
                <div class="basic-grid">
                  <div class="basic-cell"><span class="label">安装地点</span><span class="value">{{ fmt(it.installAddress) }}</span></div>
                  <div class="basic-cell"><span class="label">安装时间</span><span class="value">{{ fmtDate(it.installTime) }}</span></div>
                  <div class="basic-cell"><span class="label">安装人员</span><span class="value">{{ fmt(it.installStaffName) }}</span></div>
                  <template v-if="it.contacts && it.contacts.length">
                    <template v-for="(c, i) in it.contacts" :key="'c-'+i">
                      <div class="basic-cell"><span class="label">紧急联系人{{ i+1 }}</span><span class="value">{{ fmt(c.name) }}</span></div>
                      <div class="basic-cell"><span class="label">联系电话</span><span class="value">{{ fmt(c.phone) }}</span></div>
                      <div class="basic-cell"></div>
                    </template>
                  </template>
                  <template v-else>
                    <div class="basic-cell"><span class="label">紧急联系人</span><span class="value">—</span></div>
                    <div class="basic-cell"><span class="label">联系电话</span><span class="value">—</span></div>
                    <div class="basic-cell"></div>
                  </template>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
      <div v-else>
        <a-empty description="暂无设备详情" />
      </div>
    </a-spin>
  </div>
</template>

<style scoped lang="less">
  .m-customer-devices {
    height: 100%;
  }
  .mcd-title {
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
    margin-left: 20px;
  }
  .m-id-block {
    margin-bottom: 15px;
    .title {
      font-weight: 600;
    }
    .content {
      margin-top: 10px;
      background-color: #fff;
      padding: 10px 20px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      row-gap: 6px;
      & > li {
        max-width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
      .label {
        display: inline-block;
        width: 90px;
        text-align: right;
        color: var(--color-text-1);
        margin-right: 15px;
      }
      .value {
        display: inline-block;
        color: var(--color-text-2);
        flex: 1;
        margin-right: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .green {
        color: #00b42a;
      }
    }
    .content-basic {
      flex-direction: row;
      align-items: flex-start;
      column-gap: 16px;
    }
    .basic-left {
      width: 76px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .basic-grid {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 24px;
      row-gap: 10px;
    }
    .basic-cell {
      display: flex;
      align-items: center;
    }
    .sim-holder {
      width: 64px;
      height: 64px;
      border-radius: 6px;
      background: var(--color-fill-2);
    }
    .install-holder,
    .contact-holder {
      width: 64px;
      height: 64px;
      border-radius: 6px;
      background: var(--color-fill-2);
    }
  }
</style>
